import React from 'react';
import ReactDOM from 'react-dom';

import { createHashHistory } from 'History';
import { Router, Route, useRouterHistory, Link } from 'react-router';

const history = useRouterHistory(createHashHistory)({
  queryKey: '_key',
  basename: '/',
});

class Virtual extends React.Component {
  state = {
    show: true,
    width: 0,
    height: 0,
  }
  componentDidMount() {
    const { getScroller } = this.props;
    if (typeof getScroller === 'function') {
      const scroller = getScroller();
      if (scroller && scroller.nodeType) {
        this.scroller = scroller;
        // this.scroller.addEventListener('scroll', this.changeShow);
      }
    }
  }
  componentWillUnmount() {
    if (this.scroller && this.scroller.nodeType) {
      // this.scroller.removeEventListener('scroll', this.changeShow);
      this.scroller = null;
    }
  }
  // shoudComponentUpdate(nextProps, nextState) {
  //   const { show, width, height } = this.state;
  //   return nextState.show !== show ||
  //   nextState.width !== width ||
  //   nextState.height !== height;
  // }
  // changeShow = () => {
  //   if (this.el) {
  //     const el = ReactDOM.findDOMNode(this.el);
  //     if (el && el.nodeType) {
  //       const winW = window.innerWidth;
  //       const winH = window.innerHeight;
  //       const width = el.offsetWidth;
  //       const height = el.offsetHeight;
  //       const left = $(el).offset().left;
  //       const right = left + width;
  //       const top = $(el).offset().top;
  //       const bottom = top + height;
  //       let show = true;
  //       if (top > winH || bottom < 0 || left > winH || right < 0) {
  //         show = false;
  //       }
  //       this.setState({
  //         show,
  //         width: el.offsetWidth,
  //         height: el.offsetHeight,
  //       })
  //     }
  //   }
  // }
  render() {
    const { children } = this.props;
    const { show, width, height } = this.state;
    const child = React.Children.only(this.props.children)
    if (show) {
      return React.cloneElement(child, {
        ref: (el) => (this.el = el)
      });
    }
    return null;
  }
}

class List extends React.Component {
  state = {
    num: '',
    time: 0,
    unmountTime: 0,
  }
  constructor(props) {
    super(props);
    this.time = (+new Date());
  }
  componentDidMount() {
    this.setState({
      num: document.getElementsByTagName('*').length,
      time: new Date() - this.time,
      unmountTime: window.unmount ? new Date() - window.unmount : 0,
    });
  }
  componentWillUnmount() {
    window.unmount = new Date();
  }
  render() {
    const { len } = this.props;
    const { num, time, unmountTime } = this.state;
    const style = {
      padding: 5,
      textAlign: 'center',
    };
    return [
      <h3>页面总节点数：{this.state.num}</h3>,
      <table>
        <tr>
          <td style={style}>卸载时间</td>
          <td style={style}>渲染时间</td>
        </tr>
        <tr>
          <td style={style}>{unmountTime}</td>
          <td style={style}>{time}</td>
        </tr>
      </table>,
      <Virtual>
        <ul>
          {new Array(len).join(',').split(',').map((a, i) => (
              <li key={`${len}-${i}`} style={{ padding: 5, background: '#dadada' }}>
                <div style={{ padding: 5, background: '#fff' }}>
                  <div style={{ padding: 5, background: '#dadada' }}>
                    <div style={{ padding: 5, background: '#fff' }}>
                      <p key={`${len}-${i}`} style={{ padding: 5, background: '#dadada' }}>【顺序 {len - i}】 长长长长长长长长长长长长长长长长长长的数据</p>
                    </div>
                  </div>
                </div>
              </li>
          ))}
        </ul>
      </Virtual>,
    ];
  }
}

const Home = (props) => (
  <div id="testScroller" style={{ width: '100%', height: '100%', overflow: 'auto' }}>
    <Link to='/1' style={{ display: 'inline-block', width: 100 }}>{`列表1 (100)`} </Link>
    <Link to='/2' style={{ display: 'inline-block', width: 100 }}>{`列表2 (500)`} </Link>
    <Link to='/3' style={{ display: 'inline-block', width: 100 }}>{`列表3 (1000)`} </Link>
    <Link to='/4' style={{ display: 'inline-block', width: 100 }}>{`列表4 (1500)`} </Link>
    <Link to='/5' style={{ display: 'inline-block', width: 100 }}>{`列表5 (2000)`} </Link>
    <Link to='/6' style={{ display: 'inline-block', width: 100 }}>{`列表6 (3000)`} </Link>
    <Link to='/7' style={{ display: 'inline-block', width: 100 }}>{`列表7 (5000)`} </Link>
    <Link to='/8' style={{ display: 'inline-block', width: 100 }}>{`列表8 (10000)`} </Link>
    <br />
    <Link to='/9' style={{ display: 'inline-block', width: 100 }}>{`列表9 (100)`} </Link>
    <Link to='/10' style={{ display: 'inline-block', width: 100 }}>{`列表10 (500)`} </Link>
    <Link to='/11' style={{ display: 'inline-block', width: 100 }}>{`列表11 (1000)`} </Link>
    <Link to='/12' style={{ display: 'inline-block', width: 100 }}>{`列表12 (1500)`} </Link>
    <Link to='/13' style={{ display: 'inline-block', width: 100 }}>{`列表13 (2000)`} </Link>
    <Link to='/14' style={{ display: 'inline-block', width: 100 }}>{`列表14 (3000)`} </Link>
    <Link to='/15' style={{ display: 'inline-block', width: 100 }}>{`列表15 (5000)`} </Link>
    <Link to='/16' style={{ display: 'inline-block', width: 100 }}>{`列表16 (10000)`} </Link>
    {props.children}
  </div>
);

const Root = () => (
  <Router history={history}>
    <Route path='/' component={Home}>
      <Route name='1' path='/1' component={(props) => <List key="1" len={20} />} />
      <Route name='2' path='/2' component={(props) => <List key="2" len={100} />} />
      <Route name='3' path='/3' component={(props) => <List key="3" len={200} />} />
      <Route name='4' path='/4' component={(props) => <List key="4" len={300} />} />
      <Route name='5' path='/5' component={(props) => <List key="5" len={400} />} />
      <Route name='6' path='/6' component={(props) => <List key="6" len={600} />} />
      <Route name='7' path='/7' component={(props) => <List key="7" len={1000} />} />
      <Route name='8' path='/8' component={(props) => <List key="8" len={2000} />} />
      <Route name='9' path='/9' component={(props) => <List key="9" len={20} />} />
      <Route name='10' path='/10' component={(props) => <List key="10" len={100} />} />
      <Route name='11' path='/11' component={(props) => <List key="11" len={200} />} />
      <Route name='12' path='/12' component={(props) => <List key="12" len={300} />} />
      <Route name='13' path='/13' component={(props) => <List key="13" len={400} />} />
      <Route name='14' path='/14' component={(props) => <List key="14" len={600} />} />
      <Route name='15' path='/15' component={(props) => <List key="15" len={1000} />} />
      <Route name='16' path='/16' component={(props) => <List key="16" len={2000} />} />
    </Route>
  </Router>
);

ReactDOM.render(<Root />, document.getElementById('container'));

